<template>
	<view class="bg-white p-2">
		<u-navbar title="修改手机号" autoBack placeholder></u-navbar>
		<view class="text-main font-md font-weight-bold">您正在进行手机号重置操作</view>
		<view class="mt-2 text-light9 font-sm">更改绑定手机号后，需要重新登录。</view>
		<view class="font-md text-main" style="margin-top: 60rpx;">请输入新手机号</view>
		<view class="mt-2" style="height: 80rpx;">
			<u-input v-model="mobile" placeholder="请输入手机号" placeholderStyle="fontSize:30rpx" :customStyle="{height:'80rpx',background:'#F5F5F5'}"></u-input>
		</view>
		<view class="font-md text-main mt-5">新手机号验证码</view>
		<view class="mt-2" style="height: 80rpx;">
			<u-input v-model="code"
				placeholder="请输入验证码" clearable placeholderStyle="fontSize:30rpx" :customStyle="{height:'80rpx',background:'#F5F5F5'}">
				<template slot="suffix">
					<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
					<view class="flex align-center justify-center code" @click="getCode">{{tips}}</view>
				</template>
			
			</u-input>
		</view>
		
		<commonButton title="提交"  @click="submit"></commonButton>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '',
				code:'',
				mobile:''
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			submit(){
				if(uni.$u.test.isEmpty(this.mobile)){
					return uni.showToast({
						title: '手机号不能为空',
						icon:'none'
					});
				}
				let parmar = {
					captcha:this.code,
					mobile:this.mobile
				}
				this.$api.changemobile(parmar).then(res=>{
					if(res.code === 1){
						uni.showToast({
							title: '手机号码修改成功',
							icon:'success'
						});
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1
							});
						},1000)
					}
				})
			},


		}
	}
</script>

<style>
	.code{
		width: 222rpx;
		height: 100rpx;
		background: linear-gradient(180deg, #04BF79 0%, #02BC6B 100%);
		border-radius: 0rpx 20rpx 20rpx 0rpx;
		opacity: 1;
		font-size: 30rpx;
		font-family: Source Han Sans CN-Normal, Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}
</style>